import React, { Component } from "react";

class App extends Component {
  state = {
    num: 0,
  };
  // 加
  add = (event) => {
    let { value } = this.selectNumber;
    const { num } = this.state;
    this.setState({ num: num + value * 1 });
  };
  // 偶数加
  addIfEven = () => {
    const { value } = this.selectNumber;
    const { num } = this.state;
    if (num % 2 == 0) {
      this.setState({ num: num + value * 1 });
    }
  };
  //异步加
  addAsync = () => {
    const { value } = this.selectNumber;
    const { num } = this.state;
    setTimeout(() => {
      this.setState({ num: num + value * 1 });
    }, 1000);
  };
  render() {
    let { num } = this.state;
    return (
      <div>
        <p>
          <strong>{num}</strong>
        </p>
        <p>
          <select ref={(c) => (this.selectNumber = c)}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3 </option>
          </select>
          <button onClick={this.add}>加</button>
          <button onClick={this.addIfEven}>偶数加</button>
          <button onClick={this.addAsync}>异步加</button>
        </p>
      </div>
    );
  }
}

export default App;
